<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Navbar component - UIkit tests</title>
        <script src="../../vendor/jquery.js"></script>
        <script src="_test.js"></script>
    </head>

    <body>

        <div class="uk-container uk-container-center">

            <h1>Navbar</h1>

            <div class="uk-margin">

                <nav class="uk-navbar">

                    <ul class="uk-navbar-nav uk-hidden-small">
                        <li class="uk-active"><a href="">Active</a></li>
                        <li><a href="">Item</a></li>
                        <li class="uk-parent" data-uk-dropdown>
                            <a href="">Parent</a>

                            <div class="uk-dropdown uk-dropdown-navbar">
                                <ul class="uk-nav uk-nav-navbar">
                                    <li><a href="#">Item</a></li>
                                    <li><a href="#">Another item</a></li>
                                    <li class="uk-nav-header">Header</li>
                                    <li><a href="#">Item</a></li>
                                    <li><a href="#">Another item</a></li>
                                    <li class="uk-nav-divider"></li>
                                    <li><a href="#">Separated item</a></li>
                                </ul>
                            </div>

                        </li>
                    </ul>

                    <a href="#offcanvas-1" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                    <div class="uk-navbar-flip">

                        <a href="" class="uk-navbar-toggle uk-navbar-toggle-alt uk-visible-small"></a>

                        <ul class="uk-navbar-nav uk-hidden-small">
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="">Parent</a>

                                <div class="uk-dropdown uk-dropdown-navbar">
                                    <ul class="uk-nav uk-nav-navbar">
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Another item</a></li>
                                        <li class="uk-nav-header">Header</li>
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Another item</a></li>
                                        <li class="uk-nav-divider"></li>
                                        <li><a href="#">Separated item</a></li>
                                    </ul>
                                </div>

                            </li>
                            <li><a href="">Item</a></li>
                            <li class="uk-active"><a href="">Active</a></li>
                        </ul>

                    </div>

                    <div class="uk-navbar-content uk-navbar-center">Center</div>

                </nav>

            </div>

            <div class="uk-margin">

                <nav class="uk-navbar">

                    <ul class="uk-navbar-nav uk-hidden-small">
                        <li class="uk-parent" data-uk-dropdown>
                            <a href="">Parent</a>

                            <div class="uk-dropdown uk-dropdown-navbar">
                                <ul class="uk-nav uk-nav-navbar">
                                    <li><a href="#">Item</a></li>
                                    <li><a href="#">Another item</a></li>
                                    <li class="uk-nav-header">Header</li>
                                    <li><a href="#">Item</a></li>
                                    <li><a href="#">Another item</a></li>
                                    <li class="uk-nav-divider"></li>
                                    <li><a href="#">Separated item</a></li>
                                </ul>
                            </div>

                        </li>
                        <li><a href="">Item</a></li>
                        <li class="uk-active"><a href="">Active</a></li>
                    </ul>

                    <a href="#offcanvas-1" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                    <div class="uk-navbar-flip">

                        <ul class="uk-navbar-nav uk-hidden-small">
                            <li class="uk-active"><a href="">Active</a></li>
                            <li><a href="">Item</a></li>
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="">Parent</a>

                                <div class="uk-dropdown uk-dropdown-navbar">
                                    <ul class="uk-nav uk-nav-navbar">
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Another item</a></li>
                                        <li class="uk-nav-header">Header</li>
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Another item</a></li>
                                        <li class="uk-nav-divider"></li>
                                        <li><a href="#">Separated item</a></li>
                                    </ul>
                                </div>

                            </li>
                        </ul>

                    </div>

                </nav>

            </div>

            <div class="uk-margin">

                <nav class="uk-navbar">

                    <ul class="uk-navbar-nav uk-hidden-small">
                        <li class="uk-active"><a href="" class="uk-navbar-nav-subtitle">Active<div>Subtitle</div></a></li>
                        <li><a href="" class="uk-navbar-nav-subtitle">Item<div>Subtitle</div></a></li>
                        <li class="uk-parent" data-uk-dropdown>
                            <a href="" class="uk-navbar-nav-subtitle">Parent<div>Subtitle</div></a>

                            <div class="uk-dropdown uk-dropdown-navbar">
                                <ul class="uk-nav uk-nav-navbar">
                                    <li><a href="#">Item</a></li>
                                    <li><a href="#">Another item</a></li>
                                    <li class="uk-nav-header">Header</li>
                                    <li><a href="#">Item</a></li>
                                    <li><a href="#">Another item</a></li>
                                    <li class="uk-nav-divider"></li>
                                    <li><a href="#">Separated item</a></li>
                                </ul>
                            </div>

                        </li>
                    </ul>

                    <a href="#offcanvas-1" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                    <div class="uk-navbar-flip">

                        <a href="" class="uk-navbar-toggle uk-navbar-toggle-alt uk-visible-small"></a>

                        <ul class="uk-navbar-nav uk-hidden-small">
                            <li class="uk-parent" data-uk-dropdown>
                                <a href="" class="uk-navbar-nav-subtitle">Parent<div>Subtitle</div></a>

                                <div class="uk-dropdown uk-dropdown-navbar">
                                    <ul class="uk-nav uk-nav-navbar">
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Another item</a></li>
                                        <li class="uk-nav-header">Header</li>
                                        <li><a href="#">Item</a></li>
                                        <li><a href="#">Another item</a></li>
                                        <li class="uk-nav-divider"></li>
                                        <li><a href="#">Separated item</a></li>
                                    </ul>
                                </div>

                            </li>
                            <li><a href="" class="uk-navbar-nav-subtitle">Item<div>Subtitle</div></a></li>
                            <li class="uk-active"><a href="" class="uk-navbar-nav-subtitle">Active<div>Subtitle</div></a></li>
                        </ul>

                    </div>

                    <div class="uk-navbar-content uk-navbar-center">Center</div>

                </nav>

            </div>

            <div class="uk-margin">

                <nav class="uk-navbar">

                    <a href="#offcanvas-1" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                    <a class="uk-navbar-brand uk-hidden-small" href="">Brand</a>

                    <ul class="uk-navbar-nav uk-hidden-small">
                        <li class="uk-active"><a href="">Item</a></li>
                        <li class="uk-parent" data-uk-dropdown>
                            <a>No link</a>

                            <div class="uk-dropdown uk-dropdown-navbar">
                                <ul class="uk-nav uk-nav-navbar">
                                    <li><a href="#">Item</a></li>
                                    <li><a href="#">Another item</a></li>
                                    <li class="uk-nav-header">Header</li>
                                    <li><a href="#">Item</a></li>
                                    <li><a href="#">Another item</a></li>
                                    <li class="uk-nav-divider"></li>
                                    <li><a href="#">Separated item</a></li>
                                </ul>
                            </div>

                        </li>
                        <li><a href=""><i class="uk-icon-home"></i> Item</a></li>
                        <li><a href="" class="uk-navbar-nav-subtitle"><i class="uk-icon-star"></i> Item<div>Subtitle</div></a></li>
                    </ul>

                    <div class="uk-navbar-content uk-hidden-small">Some <a href="#">link</a>.</div>

                    <a href="" class="uk-navbar-toggle uk-hidden-small"></a>

                    <div class="uk-navbar-content uk-hidden-small">
                        <form class="uk-form uk-margin-remove uk-display-inline-block">
                            <input class="uk-form-width-small" type="text" placeholder="Search">
                            <button class="uk-button uk-button-primary">Submit</button>
                        </form>
                    </div>

                    <div class="uk-navbar-content uk-hidden-small">
                        <div class="uk-button-group">
                            <a class="uk-button uk-button-danger" href="#">Link</a>
                            <button class="uk-button uk-button-danger">Button</button>
                        </div>
                    </div>

                    <div class="uk-navbar-content uk-navbar-center uk-visible-small">Center</div>

                </nav>

            </div>

            <div class="uk-margin">

                <nav class="uk-navbar uk-navbar-attached">

                    <ul class="uk-navbar-nav">
                        <li><a href="">Item</a></li>
                    </ul>

                    <div class="uk-navbar-flip">
                        <ul class="uk-navbar-nav">
                            <li><a href="">Item</a></li>
                        </ul>
                    </div>

                    <div class="uk-navbar-content uk-navbar-center">Navbar attached</div>

                </nav>

            </div>

            <div id="offcanvas-1" class="uk-offcanvas">

                <div class="uk-offcanvas-bar">

                    <div class="uk-panel">Lorem ipsum dolor sit amet, <a href="#">consetetur</a> sadipscing elitr.</div>

                </div>

            </div>

        </div>

    </body>
</html>